<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改密码</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
    <el-container style="text-align: center; margin-top: 100px;">
        <el-header>
            <h1>修改密码</h1>
        </el-header>
        <el-main>
            <el-form :model="user" label-width="100px" style="width: 350px; margin: 0 auto;">
                <el-form-item label="手机号">
                    <el-input v-model="phoneNum" placeholder="请输入11位手机号" @input="validatePhone"></el-input>
                    <div v-if="!phoneValid" style="color: red; margin-top: 10px;">手机号格式不正确</div>
                </el-form-item>
                <el-form-item label="新密码">
                    <el-input type="password" v-model="password" placeholder="请输入密码"
                              @input="validatePassword"></el-input>
                    <div v-if="!passwordValid" style="color: red; margin-top: 10px;">密码需为6-32位字母数字组合</div>
                </el-form-item>
                <el-form-item label="确认密码">
                    <el-input type="password" v-model="confirmPassword" placeholder="请再次输入密码"
                              @input="validateConfirm"></el-input>
                    <div v-if="!confirmValid" style="color: red; margin-top: 10px;">两次密码不一致</div>
                </el-form-item>
                <el-form-item label="验证码">
                    <div style="display: flex; align-items: center;">
                        <el-input v-model="code" @input="onCodeInput" style="flex: 1;"></el-input>
                        <el-button type="primary" @click="sendCode" :disabled="!phoneValid" style="margin-left: 10px;">
                            获取验证码
                        </el-button>
                    </div>
                    <div v-if="!codeValid" style="color: red; margin-top: 10px;">验证码错误</div>
                </el-form-item>
                <div v-if="errorMessage" style="color: red; margin-top: 10px;">{{ errorMessage }}</div>
                <el-form-item>
                    <el-button type="success" @click="handleConfirm" :disabled="!allValid" style="width: 100%;">确认
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <a href="login.html">前往登录</a>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                phoneNum: '',
                password: '',
                code: '',
                confirmPassword: '',
                phoneValid: true,
                passwordValid: true,
                confirmValid: true,
                codeValid: true,
                errorMessage: '',
                generatedCode: ''
            };
        },
        computed: {
            allValid() {
                return this.phoneValid && this.passwordValid && this.confirmValid && this.codeValid;
            }
        },
        methods: {
            validatePhone() {
                const phoneRegex = /^\d{11}$/;
                this.phoneValid = phoneRegex.test(this.phoneNum);
            },
            validatePassword() {
                const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,32}$/;
                this.passwordValid = passwordRegex.test(this.password);
            },
            validateConfirm() {
                this.confirmValid = this.password === this.confirmPassword;
            },
            onCodeInput() {
                this.codeValid = true;
            },
            sendCode() {
                if (this.phoneValid) {
                    this.generatedCode = Math.floor(100000 + Math.random() * 900000).toString();
                    alert(`验证码：${this.generatedCode}`);
                }
            },
            handleConfirm() {
                if (this.code !== this.generatedCode) {
                    this.codeValid = false;
                    this.code = '';
                    return;
                }
                var _this = this;
                axios.post('http://localhost:8080/ProjectRound1_war/user/forgetPassword', {
                    phoneNum: _this.phoneNum,
                    password: _this.password
                })
                    .then(response => {
                        if (response.data.code === 200) {
                            alert('密码重置成功');
                            setTimeout(() => {
                                window.location.href = 'login.html';
                            }, 1000);
                        } else {
                            _this.$message.error(response.data.msg);
                        }
                    })
                    .catch(error => {
                        console.error('密码重置失败', error);
                        _this.errorMessage = '密码重置失败，请重试';
                    });
            }
        }
    });
</script>
</body>
</html>